<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form label-width="120px" :model="form" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.batch.productKey')" prop="productKey">
            <el-select style="width: 100%" v-model="form.productKey" :placeholder="t('system.chargerStorage.batch.placeholder.productKey')">
              <el-option v-for="item in productOptions" :key="item.productKey" :label="item.name" :value="item.productKey" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.batch.qty')" prop="qty">
            <el-input-number min="1" max="99" v-model="form.qty" :placeholder="t('system.chargerStorage.batch.placeholder.qty')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.batch.nameFormat')" prop="nameFormat">
            <el-input v-model="form.nameFormat" :placeholder="t('system.chargerStorage.batch.placeholder.nameFormat')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{ t('crud.cancelText') }}</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="state.loading">{{t('crud.confirmText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>


import {FormInstance, FormRules} from 'element-plus'


import {useI18n} from 'vue-i18n'
import {optionSelect as productOptionSelect} from '@/api/platform/product'
import {storageBatchAdd } from '@/api/system/storage'
const { t } = useI18n()

const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()

const productOptions = ref<any[]>([])

const state = reactive({
  update: false,
  visible: false,
  loading: false,
  title: t('system.chargerStorage.action.add'),
})

const form = ref<any>({
  id: undefined,
  productKey: '',
  name: '',
  qty: 10,
  nameFormat: '',
  note: '',

})

const rules = reactive<FormRules>({
  productKey: [{ required: true, message: t('system.chargerStorage.batch.validator.productKey'), trigger: 'blur' }],
  qty: [{ required: true, message: t('system.chargerStorage.batch.validator.qty'), trigger: 'blur' }],
})

const openDialog = () => {
  state.visible = true
}

const handleClose = () => {
  state.visible = false
}

const getDict = () => {
  productOptionSelect({type: 'Charger', status: 'Enabled' }).then((res) => {
    productOptions.value = res.data || []
  })
}
getDict()

const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      state.loading = true
      let data = Object.assign({}, form.value)
      await storageBatchAdd(data).finally(() => (state.loading = false))
      ElMessage.success(t('operate.tooltip.success'))
      handleClose()
      emits('success', data)
    }
  })
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>
